<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>07-列表渲染和key</title>
    <script src="react.development.js" type="text/javascript" charset="UTF-8"></script>
    <script src="react-dom.development.js" type="text/javascript" charset="UTF-8"></script>
    <script src="babel.min.js" type="text/javascript" charset="UTF-8"></script>
    <style>
        .redItalic {
            color: red;
            font-style: italic;
        }
    </style>
</head>
<body>
    <div id="app">

    </div>
</body>
<script type="text/babel">
    //1、map()函数遍历列表
    const numbers = [1,2,3,4,5];
    const doubled = numbers.map((number)=>number*2);
    console.log(doubled);

    //2、将numbers重构成一个变量
    const listItems01 = numbers.map((number)=>
        //必须为每个列表元素分配一个 key，不然会出现警告 "a key should be provided for list items"
        <li key={number}>{number}</li>
    );

    //两端必须加上<ul></ul>否则界面显示为空
    //ReactDOM.render(
    //    <ul>{listItems01}</ul>,
    //    document.getElementById("app")
    //);

    //---------------------------------------------------------

    //3、将numbers重构成一个组件，接收数组参数
    function NumberList02(props) {
        const listItems02 = props.numbers.map((number, index)=>
            //必须为每个列表元素分配一个 key，不然会出现警告 "a key should be provided for list items"    
            //通常使用来自数据的 id 作为元素的 key，当元素没有确定的 id 时，可以使用他的序列号索引 index 作为 key，key只是在兄弟节点之间必须唯一
            <li key={index}>{index + "-" + number}</li>
        );
        return (
            <ul>{listItems02}</ul>
        );
    }

    //ReactDOM.render(
    //    <NumberList02 numbers={numbers} />,
    //    document.getElementById("app")
    //);

    //---------------------------------------------------------

    //4-1、哪有循环就在那加key
    function ListItem(props) {
        const value = props.value;
        //不应该在此处加key
        return(
            <li className="redItalic">{value}</li>
        );
    }

    //4-2、哪有循环就在那加key
    function NumberList03(props) {
        const listItems03 = props.numbers.map((number, index)=>
            //应该在此处加key，哪有循环就在那加key
            <ListItem key={index} value={index + "-" + number} />
        );
        return (
            <ul>{listItems03}</ul>
        );
    }

    //5、JSX允许在大括号中嵌入任何表达式
    function NumberList04(props) {
        return (
            <ul>
                {
                    props.numbers.map((number, index)=>
                        //应该在此处加key，哪有循环就在那加key
                        <ListItem key={index} value={index + "-" + number} />
                    )
                }
            </ul>
        );
    }

    ReactDOM.render(
        <NumberList04 numbers={numbers} />,
        document.getElementById("app")
    );

</script>
</html>